<template>
	<!-- 表格列组件，为了支持嵌套表头而独立出组件，目前无法实现嵌套 -->
	<template v-for="(item, index) in columnList" :key="index">
		<template v-if="item.colEnable && item.colShow">
			<el-table-column show-overflow-tooltip v-bind="item">
				<template #header="scope">
					<!-- 列头部插槽 -->
					<slot :name="'header_' + item.prop" v-bind="scope">
						{{ scope.column.label }}
					</slot>
				</template>
				<template #default="scope">
					<!-- 列内容插槽 -->
					<slot :name="'col_' + item.prop" v-bind="scope">
						<template v-if="item._dictData">
							<DictTag v-if="item.tag" :value="scope.row[item.prop]" :options="item._dictData"></DictTag>
							<DictText v-else :value="scope.row[item.prop]" :options="item._dictData"></DictText>
						</template>
						<template v-else>
							<el-tag v-if="item.tag"> {{ scope.row[item.prop] }}</el-tag>
							<template v-else> {{ scope.row[item.prop] }}</template>
						</template>
					</slot>
					<!-- todo 目前嵌套有问题，无法实现 -->
					<!-- <Column v-if="item.childrenList" :column-list="item.childrenList"></Column> -->
					<!-- <el-table-column v-for="(a, index1) in item.childrenList" :key="index1" show-overflow-tooltip v-bind="a">
			</el-table-column> -->
				</template>
			</el-table-column>
		</template>
	</template>
</template>

<script setup lang="ts" name="Column">
import { ColumnProps } from '@/components/CTable/interface'
const props = defineProps<{ columnList?: ColumnProps[] }>()
console.log('columnList', props.columnList)
</script>
